<!doctype html>
<html class="no-js fixed-layout">

<!--通用head-->
{include file="Public:head"}
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
	以获得更好的体验！</p>
<![endif]-->
<!--管理端头部-->
{include file="Public:header"}

			<!-- content start -->
<div class="am-cf admin-main">

	<!--管理端左菜单栏-->
	{include file="Public:menu"}

			<div class="admin-content">
				<div class="admin-content-body">
					<div class="am-cf am-padding content-top-text">
						<div class="am-fl am-cf "><span id="aa">实时数据&emsp;{$date_ss}</span></div>
					</div>
					<div class="am-padding">
						<div class="am-panel am-panel-default">
							<div class="am-panel-hd">
								<h3 class="am-panel-title">关键指标</h3>
							</div>
							<table class="am-table am-table-bordered">
								<tr>
									<td>
										<div class=" am-u-lg-12 am-padding-sm">
											<small>开始售电</small>
											<span class="tb_num">{$users_2.sj1}</span>
											<small>日<span class="am-icon-long-arrow-up" style="color: red;"></span><strong class="am-monospace">{$users_2.bfb1}%</strong></small>
										</div>
									</td>
									<td>
										<div class=" am-u-lg-6 am-padding-sm">
											<small>直接交易购电</small>
											<span class="tb_num">{$users_2.sj2}</span>
											<small>日<span class="am-icon-long-arrow-up" style="color: red;"></span><strong class="am-monospace">{$users_2.bfb2}%</strong></small>
										</div>
									</td>
									<td>
										<div class=" am-u-lg-6 am-padding-sm">
											<small>负荷预测</small>
											<span class="tb_num">{$users_2.sj3}</span>
											<small>日<span class="am-icon-long-arrow-up" style="color: red;"></span><strong class="am-monospace">{$users_2.bfb3}%</strong></small>
										</div>
									</td>
									<td>
										<div class=" am-u-lg-6 am-padding-sm">
											<small>利润预测</small>
											<span class="tb_num">{$users_2.sj4}</span>
											<small>日<span class="am-icon-long-arrow-up" style="color: red;"></span><strong class="am-monospace">{$users_2.bfb4}%</strong></small>
										</div>
									</td>

									</td>
								</tr>
							</table>
						</div>
						<div data-am-widget="tabs"  class="am-tabs am-tabs-default ">

							<ul class="am-tabs-nav">
								<li class="am-active">
									<a href="[data-tab-panel-0]">小时指标</a>
								</li>
								<li class="">
									<a href="[data-tab-panel-1]">开始售电</a>
								</li>
								<li class="">
									<a href="[data-tab-panel-2]">直接交易购电</a>
								</li>
								<li class="">
									<a href="[data-tab-panel-3]">负荷预测</a>
								</li>
								<li class="">
									<a href="[data-tab-panel-4]">利润预测</a>
								</li>
							</ul>
								<div class="am-tabs-bd">
									<div data-tab-panel-0 class="am-tab-panel am-active">
										<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
											<span class="am-titlebar-title">小时指标趋势图</span>
										</div>
										<div id="container0"></div>
									</div>

									<div data-tab-panel-1 class="am-tab-panel am-active">
										<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
											<span class="am-titlebar-title">开始售电趋势图</span>
										</div>
										<div id="container1"></div>
									</div>
									<div data-tab-panel-2 class="am-tab-panel am-active">
										<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
											<span class="am-titlebar-title">直接交易购电趋势图</span>
										</div>
										<div id="container2"></div>
									</div>
									<div data-tab-panel-3 class="am-tab-panel am-active">
										<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
											<span class="am-titlebar-title">负荷预测趋势图</span>
										</div>
										<div id="container3"></div>
									</div>
									<div data-tab-panel-3 class="am-tab-panel am-active">
										<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
											<span class="am-titlebar-title">利润预测趋势图</span>
										</div>
										<div id="container4"></div>
									</div>

								</div>

					</div>

				</div>

				<footer class="admin-content-footer">
					<hr>
					<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
				</footer>
			</div>
			<!-- content end -->
</div>

</div>
		<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

		<!--[if lt IE 9]>
<script src="__PUBLIC__static/js/jquery.min.js"></script>
<script src="__PUBLIC__static/js/modernizr.js"></script>
<script src="__PUBLIC__static/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="__PUBLIC__static/js/jquery.min.js"></script>
		<!--<![endif]-->
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="__PUBLIC__static/js/amazeui.min.js"></script>
		<script src="" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__static/js/highcharts.js" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__static/js/app.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$userss=[];
		{foreach $usersq as $k=>$v}
   	 		$userss[{$k}]=[{$v.hour0},{$v.hour2},{$v.hour4},{$v.hour6},{$v.hour8},{$v.hour10},{$v.hour12},{$v.hour14},{$v.hour16},{$v.hour18},{$v.hour20},{$v.hour22}];

		{/foreach}
			console.log($userss[0])
    function chart($a) {
        Highcharts.chart('container'+$a,{
            title: {
                text: null
            },
            yAxis: {
                title: {
                    text: null
                },
            },
            legend: {
                enabled: false
            },
            xAxis: {
                categories: ['00', '02', '04', '06', '08', '10', '12', '14', '16', '18', '20', '22']
            },
            series: [{
                name: '',
                data: [ $userss[$a][0],$userss[$a][1], $userss[$a][2], $userss[$a][3],$userss[$a][4], $userss[$a][5], $userss[$a][6],$userss[$a][7], $userss[$a][8], $userss[$a][9],$userss[$a][10], $userss[$a][11]],
    }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    }
            chart(0);
            chart(1);
            chart(2);
            chart(3);
            chart(4);

</script>
<script type="text/javascript">


</script>

	</body>

</html>